<template>
    <div class="table-search table-search-padding" v-if="columns.length">
        <el-form ref="formRef" :name="`${name}_searchForm`" :model="searchParam" :inline="true"
            class="search_form_class d-flex ai-flex-start">
            <template v-for="(item, key) in getSearchList" :key="item.prop">
                <el-form-item v-if="item.searchShow != false" :label="`${item.formLabel}`" :class="item.searchType == 'timerange'
                    || item.searchType == 'daterange'
                    || item.searchType == 'datetimerange' ? 'search_form_date' : 'search_form_type'">
                    <SearchFormItem :item="item" :name="`${name}_searchForm`" :searchParam="searchParam"
                        @update:search="search"></SearchFormItem>
                </el-form-item>
            </template>
            <el-form-item>
                <div class="search-operation">
                    <e-button @click="search">查询</e-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup name="searchForm">
import SearchFormItem from "./components/SearchFormItem.vue";
// 默认值
const props = defineProps({
    columns: {
        type: Array,
        default: () => []
    },
    searchParam: {
        type: Object,
        default: () => {}
    },
    name: {
        type: String,
        default: ''
    },
    search: {
        type: Function,
        default: () => {}
    },
    reset: {
        type: Function,
        default: () => {}
    }
});
watch(() => props.columns, (nev) => {
    props.columns.forEach(item => {
        item.formLabel = item.formLabel ? item.formLabel : item.label;
    })
}, { immediate: true, deep: true })



// 是否展开搜索项
const searchShow = ref(false);

// 根据是否展开配置搜索项长度
const getSearchList = computed(() => {
    if (searchShow.value) return props.columns;
    return sortByKey(props.columns, 'searchSort');
});

const sortByKey = (array, key) => {
    return array.sort(function (a, b) {
        var x = a[key];
        var y = b[key];
        return x < y ? -1 : x > y ? 1 : 0;
    });
}
</script>
